<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"> 

<h:head>

 <h:outputScript>
        function containsFilter(subString, value){
            if(subString.length>=1) {
                if(value.indexOf(subString)!=-1) 
                    return true;
            }else return false;
        };

    </h:outputScript>


</h:head> 
<body>
    <rich:panel>
        <f:facet name="header">
        Write your own custom rich components with built-in AJAX support
        </f:facet>
		<h:outputText value="Panel Body" /> 
		
		
		<h:form>

<h:panelGrid columns="2">
<h:outputLabel value="autocomplete1" for="a1"/>
				<rich:autocomplete autocompleteMethod="#{test2.autocomplete}" 
				                   autocompleteList="#{test2.suggestions}" 
				                   showButton="true"
				                   mode="cachedAjax" 
				                   minChars="1" 
				                   autofill="true"
				                   selectFirst="true"
				                   id="a1" 
				                   onbeforedomupdate="alert('ddddd');" 
				                   onlistclick="alert('listclick');" 
				                   onfocus="alert('focus');" />


<h:outputLabel value="autocomplete Client" for="a2"/>
				<rich:autocomplete autocompleteList="#{test2.suggestions}" 
				                   showButton="true"
				                   mode="client" 
				                   minChars="1" 
				                   autofill="true"
				                   selectFirst="true"
				                   clientFilterFunction="containsFilter"
				                   id="a2"  
				                    />


<h:outputLabel value="autocomplete cachedAjax" for="a3"/>
				<rich:autocomplete autocompleteMethod="#{test2.autocomplete}" 
				                   autocompleteList="#{test2.suggestions}" 
				                   showButton="true"
				                   mode="cachedAjax"
				                   clientFilterFunction="containsFilter" 
				                   minChars="2" 
				                   autofill="true"
				                   selectFirst="true"
				                   id="a3"  
				                   var="var"
				                   immediate="true"
				                   layout="list"
				                   required="true"
				                   onselectitem="alert('selected');"
				                   selectedItemClass=""
				                   popupClass=""
				                   onchange="return onEvent.call(this, event);" 
                                   onblur="return onEvent.call(this, event);" 
                                   onfocus="return onEvent.call(this, event);"
				                    />


<h:outputLabel value="autocomplete ajax" for="a4"/>
				<rich:autocomplete autocompleteMethod="#{test2.autocomplete}" 
				                   showButton="true"
				                   mode="ajax" 
				                   minChars="1" 
				                   autofill="true"
				                   selectFirst="true"
				                   id="a4"  
				                    />
				                    
				                    
				                    
				                    
<h:outputLabel value="autocomplete Cashedajax 2 " for="a5"/>
				<rich:autocomplete autocompleteMethod="#{test2.autocomplete}" 
				                   showButton="true"
				                   mode="cachedAjax" 
				                   minChars="1" 
				                   id="a5"  
				                    />
				                    
				                    
				                    
				                    
				                    
</h:panelGrid>

  <script type="text/javascript">
            onEvent = function(event, element, data) {
                RichFaces.log.info("jQuery Event: " + (event instanceof jQuery.Event) + "; event: " + event.type + "; data:" + (data || (event['rich'] || {})['data']) + "; this.id:" + this.id + "; component:" + (event['rich'] || {})['component'] || RichFaces.$(this.id));
            };
            RichFaces.Event.bindById("form:a3", "selectitem change blur focus", onEvent);
  </script>
        
<div>
                    <a4j:log mode="inline"></a4j:log>
</div>

</h:form>


	</rich:panel>
</body> 
</html>
